<docs>
  ## 代办个人社保信息变更服务
</docs>
<template>
  <div>
    <mheader class="index" @back_btn="goBack()" title="代办个人社保信息变更服务"></mheader>
    <!-- 申请须知 开始 -->
    <div class="list">
      <div class="title">
        <h3 class="title-h3">申请须知</h3>
      </div>
      <div class="content">
        <ul>
          <li class="c-li">1、<span>网上个人社会保险信息变更服务的宗旨是“方便群众、提高效率、创新服务”。</span></li>
          <li class="c-li">2、<span>服务对象为在本市流动人员人事档案管理服务机构（以下简称档案管理服务机构）存档，且当前在档案管理服务机构代办社会保险并正常缴纳社会保险费的人员。</span></li>
          <li class="c-li">3、<span>个人社会保险信息变更需通过在档案管理服务机构预留手机号进行身份验证。</span></li>
          <li class="c-li">4、<span>请认真填写信息变更内容，确保信息真实、准确、完整。</span></li>
          <li class="c-li">5、<span>社会保险缴费基数变更申报时间为每年6月20日至7月20日，每人每自然年度只能申报调整一次（具体安排按照当年社保政策执行）。</span></li>
          <li class="c-li">6、<span>社会保险信息变更工作需要档案管理服务机构工作人员前往社保中心代为办理，为避免造成信息变更错误，请勿多次重复提交变更内容。</span></li>
          <li class="c-li">7、<span>因发生不可抗力或因电力通讯设施故障等原因，致使服务延迟或未能履行的，档案管理服务机构不承担任何责任。</span></li>
          <li class="c-li">8、<span>任何单位和个人不得修改、变更网上个人社会保险信息变更服务的程序和内容，不得利用网上个人社会保险信息变更进行有偿服务，否则，将承担由此产生的一切后果及法律责任。</span></li>
          <li class="c-li"><mt-switch :value.sync="value" @change="turn">已阅读并同意</mt-switch></li>
        </ul>
      </div>
    </div>
    <!-- 通知 -->
    <div class="notice" v-show="visible" @click="sqList">
      <i class="iconfont icon-notice icon-before"></i>
      <p class="content">{{noticeText}}</p>
      <i class="iconfont icon-arrow icon-after"></i>
    </div>
    <!-- 申请按钮 开始 -->
    <div class="apply">
      <div class="info">
        <div class="info-cont1" >
          <p class="info-cont1-name">{{grxx.xm}}</p>
          <p class="info-cont1-phone">电话：{{grxx.lxdh}}</p>
        </div>
        <p class="info-cont2">身份证号：{{grxx.sfzhm}}</p>
      </div>
      <!-- <div class="apply-btn" @click="reverseBtn">同意 开始办理</div> -->
      <button
        type="button"
        class="left btn btn-primary apply-btn"
        @click="reverseBtn"
        :disabled="!value"
      >开始办理</button>
    </div>
  </div>
</template>
<script>
import Mheader from '@/ldry/group/mheader/mheader';
import $ from '@/common/js/axios';

export default {
  components: { Mheader },
  name: 'index',
  data() {
    return {
      value: false,
      visible: false,
      noticeText: "",
      grxx: {
        sfzhm: '',
        xm: '',
        lxdh: ''
      },
    };
  },
  methods: {
    turn(){
      this.value = !this.value;
    },
    init() {
      this.$loading = true;
      // 获取最新申请信息 一条的那种
      $.get("/dafwgl/personal/jbxxCx", {
        params: {
          ywlx: "zjcbsq" //参保申请
        }
      })
        .then(res => {
          let _res = res.returnData;
          if (+_res.executeResult == 1) {
            if (_res.zjcbsq) {
              this.noticeText = _res.zjcbsq;
              this.visible = true;
            }
          } else {
            this.$alert({
              type: "warning",
              message: _res.message
            });
            return false;
          }
        })
        .finally(() => {
          this.$loading = false;
        });
    },
    goBack(){
      this.$router.push({ name: 'index' })
    },
    // 申请记录页面跳转
    sqList() {
      this.$router.push({ name: "dbSearch" });
    },
    // 检查按钮是否可用
    reverseBtn() {
      let _this = this;
      $({
        url:'/dafwgl/personal/checkSfcd',
        method:'post',
        data:{
          ywlx : '3'
        }
      }).then((res)=>{
        let _res = res.returnData;
        if(+_res.cdxs == 0 || +_res.executeResult == 0){
          this.$alert({
            type: 'warning',
            message: _res.message
          });
        }else{
          let cdjg = _res.cdjg;
          let code = _res.code;
          this.$router.push({ path: '/bglink',query:{code:code,cdjg:cdjg} });
        }
      })
    }

  },
  created() {
    this.init();
    this.grxx = JSON.parse(sessionStorage.getItem('person'));
  }
};
</script>
<style scoped lang="scss">
@import '~common/scss/variable.scss';

//竖屏  CSS
@media screen and (orientation: portrait) {
  .index {
    position: relative;
    // height: 100vh;
    width: 100vw;
  }
}
@media screen and (orientation: landscape) {

//横CSS

}
// 申请须知
.list {
  border: $border;
  background-color: #fff;
  .title {
    display: flex;
    padding: 28px 48px;
    border-bottom: $border;
  }
  .title-h3 {
    font-size: $font-size-large;
    color: $color-text-title;
    flex: 1 1 auto;
    line-height: 80px;
  }
  .content {
    padding: 36px 48px;
    .c-li {
      line-height: 1.6;
      padding: 15px 0 15px 15px;
      font-size: 0.44444rem;
      span{
        width: 91%;
        display: inline-table;
      }
    }
  }
}
</style>
